<template>
  <div id="manage">
    <div class="manageBgc">
      <h2>设备管理</h2>
    </div>
    <div class="manage-list">
      <table>
        <tr>
          <th>设备名称</th>
          <th>类型/地址</th>
          <th>最后登录时间</th>
          <th>编辑</th>
        </tr>
        <tr v-for="manageList,index in manageLists">
          <td>{{manageList.td1}}</td>
          <td>{{manageList.td2}}</td>
          <td>{{manageList.td3}}</td>
          <td>
            <a :class="{borderA:manageList.isBorderA}" href="#" onclick="javascript:return false;" @click="delt(manageList,index)">{{manageList.td4}}</a>
          </td>
        </tr>
      </table>

    </div>
    <div class="footer">
      <footer-one></footer-one>
    </div>
  </div>

</template>
<script>
  import FooterOne from '../../components/firmware/footer.vue'
  export default{
    name:'manage',
    data(){
      return{
        screenHeight: window.screen.height-150,
        manageLists:[
          {
            td1:'苗苗的店',
            name:'当前设备',
            td2:'android',
            td3:'2017/5/6 10:40:38',
            td4:'当前设备',
            isBorderA:false
          },
          {
            td1:'璐璐的店',
            td2:'ios',
            td3:'2017/6/6 10:40:38',
            td4:'删除设备',
            isBorderA:true
          },
          {
            td1:'娜娜的店',
            td2:'windows',
            td3:'2017/7/6 10:40:38',
            td4:'删除设备',
            isBorderA:true
          }
        ]
      }
    },
    //注册组件
    components:{FooterOne},
    //实例加载完执行函数
    mounted(){
      //设置模块高度
      document.getElementById('manage').style.height=this.screenHeight+"px";//页面初始化
    },
    methods:{
        delt:function (manageList,index) {
          console.log(manageList);
          console.log(index);

          let _self = this;
          let arr = _self.manageLists;
          console.log(arr[index.name])
          arr.forEach(function (el) {
            if(el == manageList){
                if(el.name == '当前设备'){
                  arr.splice(index, 0)
                }else {
                  arr.splice(index, 1)
                }

            }
          })
//          arr.splice(index, 1)
        }

    },
    //监听
    watch:{
      screenHeight (val) {
        this.screenHeight = val
        document.getElementById('manage').style.height = this.screenHeight -150 + "px";//检测窗口的大小，并赋值
      },
    }
  }
</script>
<style scoped>
  #manage{
    width: 100%;
    margin: auto;
  }
  a{
    text-decoration: none;
    color:#FF7A3F;
  }
  .borderA{
    border: 1px solid #FF7A3F;
    padding: 7px;
    border-radius: 7px;
  }
  .manageBgc{
    background: url("../../assets/bg_background.png") no-repeat;
    background-size:100% 100%;
    -moz-background-size:100% 100%;
    display: table;
    height: 30%;
    margin: auto;
    width: 100%;
  }
  .manageBgc h2{
    display: table-cell;
    vertical-align: middle;
    color: #ffffff;
    font-size: 2.0rem;
    font-weight: 100;
    letter-spacing:2px;
  }
  /*设备列表*/
  .manage-list{
    padding: 7rem 0;
  }
  .manage-list table{
    margin: auto;
    text-align: left;
    width: 70%;
  }
  .manage-list table th{
    padding: 20px 0;

  }
  .manage-list table td{
    padding: 20px 0;
  }
  /*页脚*/
  .footer{
    position: fixed;
    left: 0;
    right: 0;
    bottom:0;
    min-width: 1200px;
  }

</style>
